<template>
  <div>
    <form-solt :columns="ruleFieldList" :options="options" :formData="formData">
    </form-solt>
  </div>
</template>

<script setup>
import FormSolt from './FormSolt.vue';
import { reactive, ref, toRefs, onMounted, getCurrentInstance } from 'vue';
const changes = value => {
  alert(value);
};

const formData = ref({});
const ruleFieldList = ref([
  {
    label: '姓名',
    field: 'name',
    disabled: false,
    rules: [
      {
        required: true,
        message: 'Please input email address',
        trigger: 'blur',
      },
    ],
  },
  {
    label: '性别',
    field: 'gender',
    type: 'radio',
    options: {
      data: [
        { label: '男', value: 1 },
        { label: '女', value: 0 },
      ],
    },
  },
  {
    label: '爱好',
    field: 'hobbies',
    type: 'checkbox',
    disabled: false,
    options: {
      data: [
        { label: '吃饭', value: 1 },
        { label: '睡觉', value: 2 },
        { label: '写代码', value: 3 },
      ],
    },
  },
  {
    label: '工作',
    field: 'job',
    type: 'select',
    options: {
      data: [
        { label: '吃饭', value: 1 },
        { label: '睡觉', value: 2 },
        { label: '写代码', value: 3 },
      ],
    },
  },
  {
    label: '密码',
    field: 'password',
    type: 'password',
    placeholder: '这是一个密码输入框',
  },
  {
    label: '只读',
    field: 'readonly',
    readonly: true,
    placeholder: '这是一个只读输入框',
  },
  {
    label: '留言板',
    field: 'summary',
    type: 'textarea',
    placeholder: '留言板',
  },
]);
</script>
<style lang="scss" scoped></style>
